<template>
	<skeleton v-if="!isLoding"></skeleton>
	<view v-else class="content">
		<!-- 商城部分 轮播图+广告位+商品列表 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular autoplay interval="2000" duration="500" @change="onSwiperChange" previous-margin="50rpx" next-margin="50rpx">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="pic" :class="{ current: current === index }" :src="item.bannerUrl" mode="aspectFill" @click="bannerToGoods(index)"></image>
				</swiper-item>
			</swiper>
			<view class="dots row"><view class="dot" :class="{ current: current === index }" v-for="(item, index) in bannerList" :key="index"></view></view>
		</view>
		<!-- 图片展示区 -->
		<image :src="StaticUrl + '/image/shop/img_adv0.png'" style="width: 727rpx;height: 185rpx;margin: 20rpx auto;"></image>
		<!-- 商品展示区 采用流式布局 L + R -->
		<view class="uni-product-list">
			<!-- 左边内容 -->
			<view class="uni-product-Item">
				<view class="uni-product" v-for="(product, index) in productListLeft" :key="index" @click="toGoodsDetail(0, index)">
					<image class="uni-product-image" :src="product.thumbnail"></image>
					<view class="uni-product-name">{{ product.name }}</view>
					<view class="uni-product-des">{{ product.description }}</view>
					<text class="uni-product-price-original">
						{{ product.price }}
						<text style="font-size: 20rpx;">/爱豆</text>
					</text>
				</view>
			</view>

			<!-- 右边内容 -->
			<view class="uni-product-Item">
				<view class="uni-product" v-for="(product, index) in productListRight" :key="index" @click="toGoodsDetail(1, index)">
					<image class="uni-product-image" :src="product.thumbnail"></image>
					<view class="uni-product-name">{{ product.name }}</view>
					<view class="uni-product-des">{{ product.description }}</view>
					<text class="uni-product-price-original">
						{{ product.price }}
						<text style="font-size: 20rpx;">/爱豆</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
import * as api from '@/api/login';
import skeleton from '../../components/skeleton/skeleton_mall.vue'
export default {
	components:{
		skeleton
	},
	data() {
		return {
			StaticUrl: '',
			toShake: false,
			bannerList: [],
			current: 0,
			title: 'product-list',
			productListLeft: [], //左半边的数据
			productListRight: [], //右半边的数据
			renderImage: true,
			innerAudioContext: null,
			musSrc:'',
			isLoding: false,
			audioAction:{
				method:'play'
			}
		};
	},
	onLoad() {
		this.StaticUrl = config.StaticUrl;
		this.userId = this.$store.state.userInfo.currentUser.userId;
		this.getIndexBanner();
		this.getGoodsList();
	},
	onPullDownRefresh() {
		this.refreshData();
		let T = setTimeout(() => {
			clearTimeout(T);
			uni.stopPullDownRefresh();
		}, 2000);
	},
	methods: {
		// 获取轮播图
		getIndexBanner() {
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'getIndexBanner'
			};
			api.getIndexBanner(data).then(function(res) {
					console.log('getIndexBanner success', res);
					if(res.data.success) {
						that.bannerList = res.data.data.bannerList;
						that.isLoding = true
					}
				}).catch(function(error) {
					console.log('getIndexBanner fail', error);
				});
		},
		// 获取商品信息
		getGoodsList() {
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'getDisplayGoodsList'
			};
			api.getGoodsList(data).then(function(res) {
					console.log('getGoodsList success!', res);
					if (res.data.success) {
						res.data.data.goods.forEach((item, index) => {
							if (index % 2 === 0) {
								that.productListLeft.push(item);
							} else {
								that.productListRight.push(item);
							}
						});
					} else {
						that.$toast('加载商品失败!')
					}
				}).catch(function(error) {
					console.log('getGoodsList fail', error);
				});
		},
		// 轮播图自动切换事件监听
		onSwiperChange(e) {
			this.current = e.detail.current;
		},
		// 轮播图到商品页
		bannerToGoods(index) {
			let that = this;
			// console.log(JSON.stringify(that.bannerList[index].goodsCache));
			uni.navigateTo({
				url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.bannerList[index].goodsCache)
			});
		},
		// 刷新数据
		refreshData() {
			this.productListLeft = [];
			this.productListRight = [];
			this.getGoodsList();
		},
		// 查看商品详情
		toGoodsDetail(item, index) {
			console.log(this.productListLeft[index]);
			let that = this;
			if (item === 0) {
				uni.navigateTo({
					url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.productListLeft[index])
				});
			} else {
				uni.navigateTo({
					url: 'goodsDetail/goodsDetail?content=' + JSON.stringify(that.productListRight[index])
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import url('../style/animation.css');
page {
	background-color: #f5f5f5;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.uni-margin-wrap {
	position: relative;
	background-color: #fff;
}
.swiper {
	width: 750rpx;
	height: 310rpx;
	padding-top: 10rpx;
}
.swiper-item {
	width: 702rpx;
	height: 300rpx;
	/* margin: 0rpx 24rpx; */
	border-radius: 15rpx;
}

.pic {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
	transform: scale(0.94, 0.88);
	transition: transform 0.36s;

	&.current {
		transform: scale(1);
	}
}
.dots {
	position: absolute;
	left: 0;
	bottom: 12rpx;
	width: 100%;
}
.dot {
	width: 32rpx;
	height: 8rpx;
	margin: 0 6rpx;
	background-color: #fff;
	border-radius: 10px;

	&.current {
		background-color: $choice-color;
	}
}

.row {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
// 商品展示区
view {
	font-size: 28rpx;
}

.uni-product-list {
	margin-top: 30rpx;
	padding-bottom: 30rpx;
	display: flex;
	width: 750rpx;
	justify-content: space-around;
	background-color: #f5f5f5;
}
.uni-product-Item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.uni-product {
	margin: 5rpx;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 15px;
}

.image-view {
	height: 330rpx;
	width: 330rpx;
	margin: 12rpx 0;
}

.uni-product-image {
	height: 330rpx;
	width: 330rpx;
}

//
.uni-product-name,
.uni-product-des {
	width: 300rpx;
	word-break: break-all; //如何在单词内断行
	display: -webkit-box;
	overflow: visible;
	line-height: 1.5;
	text-overflow: ''; //文本溢出处显示的内容
	-webkit-box-orient: vertical;
	// -webkit-line-clamp: 2; //将块容器中的内容限制为指定行数
}
.uni-product-name {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #000000;
}
.uni-product-des {
	font-size: 22rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #000000;
	opacity: 0.5;
}

.uni-product-price {
	margin-top: 10rpx;
	font-size: 28rpx;
	line-height: 1.5;
	position: relative;
}

.uni-product-price-original {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #ff2727;
}

.uni-product-price-favour {
	color: #888888;
	text-decoration: line-through;
	margin-left: 10rpx;
}

.uni-product-tip {
	position: absolute;
	right: 10rpx;
	background-color: #ff3333;
	color: #ffffff;
	padding: 0 10rpx;
	border-radius: 5rpx;
}
</style>
